<script lang="ts" setup>
import type {
  WorkbenchProjectItem,
  WorkbenchQuickNavItem,
  WorkbenchTodoItem,
  WorkbenchTrendItem,
} from '@vben/common-ui';

import { ref } from 'vue';
import { useRouter } from 'vue-router';

import {
  AnalysisChartCard,
  WorkbenchHeader,
  WorkbenchProject,
  WorkbenchQuickNav,
  WorkbenchTodo,
  WorkbenchTrends,
} from '@vben/common-ui';
import { preferences } from '@vben/preferences';
import { useUserStore } from '@vben/stores';
import { openWindow } from '@vben/utils';

import AnalyticsVisitsSource from '../analytics/analytics-visits-source.vue';

import { $t } from '#/locales';

const userStore = useUserStore();

// 这是一个示例数据，实际项目中需要根据实际情况进行调整
// url 也可以是内部路由，在 navTo 方法中识别处理，进行内部跳转
// 例如：url: /dashboard/workspace
const projectItems: WorkbenchProjectItem[] = [
  {
    color: '#6DB33F',
    content: 'github.com/YunaiV/ruoyi-vue-pro',
    date: '2025-01-02',
    group: $t('views.dashboard.workspace.project.item-0'),
    icon: 'simple-icons:springboot',
    title: 'ruoyi-vue-pro',
    url: 'https://github.com/YunaiV/ruoyi-vue-pro',
  },
  {
    color: '#409EFF',
    content: 'github.com/yudaocode/yudao-ui-admin-vue3',
    date: '2025-02-03',
    group: $t('views.dashboard.workspace.project.item-1'),
    icon: 'ep:element-plus',
    title: 'yudao-ui-admin-vue3',
    url: 'https://github.com/yudaocode/yudao-ui-admin-vue3',
  },
  {
    color: '#ff4d4f',
    content: 'github.com/yudaocode/yudao-ui-mall-uniapp',
    date: '2025-03-04',
    group: $t('views.dashboard.workspace.project.item-2'),
    icon: 'icon-park-outline:mall-bag',
    title: 'yudao-ui-mall-uniapp',
    url: 'https://github.com/yudaocode/yudao-ui-mall-uniapp',
  },
  {
    color: '#1890ff',
    content: 'github.com/YunaiV/yudao-cloud',
    date: '2025-04-05',
    group: $t('views.dashboard.workspace.project.item-3'),
    icon: 'material-symbols:cloud-outline',
    title: 'yudao-cloud',
    url: 'https://github.com/YunaiV/yudao-cloud',
  },
  {
    color: '#e18525',
    content: 'github.com/yudaocode/yudao-ui-admin-vben',
    date: '2025-05-06',
    group: $t('views.dashboard.workspace.project.item-4'),
    icon: 'devicon:antdesign',
    title: 'yudao-ui-admin-vben',
    url: 'https://github.com/yudaocode/yudao-ui-admin-vben',
  },
  {
    color: '#2979ff',
    content: 'github.com/yudaocode/yudao-ui-admin-uniapp',
    date: '2025-06-01',
    group: $t('views.dashboard.workspace.project.item-5'),
    icon: 'ant-design:mobile',
    title: 'yudao-ui-admin-uniapp',
    url: 'https://github.com/yudaocode/yudao-ui-admin-uniapp',
  },
];

// 同样，这里的 url 也可以使用以 http 开头的外部链接
const quickNavItems: WorkbenchQuickNavItem[] = [
  {
    color: '#1fdaca',
    icon: 'ion:home-outline',
    title: $t('views.dashboard.workspace.quickNav.item-0'),
    url: '/',
  },
  {
    color: '#ff6b6b',
    icon: 'lucide:shopping-bag',
    title: $t('views.dashboard.workspace.quickNav.item-1'),
    url: '/mall',
  },
  {
    color: '#7c3aed',
    icon: 'tabler:ai',
    title: $t('views.dashboard.workspace.quickNav.item-2'),
    url: '/ai',
  },
  {
    color: '#3fb27f',
    icon: 'simple-icons:erpnext',
    title: $t('views.dashboard.workspace.quickNav.item-3'),
    url: '/erp',
  },
  {
    color: '#4daf1bc9',
    icon: 'simple-icons:civicrm',
    title: $t('views.dashboard.workspace.quickNav.item-4'),
    url: '/crm',
  },
  {
    color: '#1a73e8',
    icon: 'fa-solid:hdd',
    title: $t('views.dashboard.workspace.quickNav.item-5'),
    url: '/iot',
  },
];

const todoItems = ref<WorkbenchTodoItem[]>([
  {
    completed: false,
    content: $t('views.dashboard.workspace.todo.item-0-content'),
    date: '2024-07-15 09:30:00',
    title: $t('views.dashboard.workspace.todo.item-0-title'),
  },
  {
    completed: false,
    content: $t('views.dashboard.workspace.todo.item-1-content'),
    date: '2024-08-30 14:20:00',
    title: $t('views.dashboard.workspace.todo.item-1-title'),
  },
  {
    completed: false,
    content: $t('views.dashboard.workspace.todo.item-2-content'),
    date: '2024-07-25 16:45:00',
    title: $t('views.dashboard.workspace.todo.item-2-title'),
  },
  {
    completed: false,
    content: $t('views.dashboard.workspace.todo.item-3-content'),
    date: '2024-07-10 11:15:00',
    title: $t('views.dashboard.workspace.todo.item-3-title'),
  },
]);
const trendItems: WorkbenchTrendItem[] = [
  {
    avatar: 'svg:avatar-1',
    content: $t('views.dashboard.workspace.trends.item-0-content'),
    date: $t('views.dashboard.workspace.trends.item-0-date'),
    title: $t('views.dashboard.workspace.trends.item-0-title'),
  },
  {
    avatar: 'svg:avatar-2',
    content: $t('views.dashboard.workspace.trends.item-1-content'),
    date: $t('views.dashboard.workspace.trends.item-1-date'),
    title: $t('views.dashboard.workspace.trends.item-1-title'),
  },
  {
    avatar: 'svg:avatar-3',
    content: $t('views.dashboard.workspace.trends.item-2-content'),
    date: $t('views.dashboard.workspace.trends.item-2-date'),
    title: $t('views.dashboard.workspace.trends.item-2-title'),
  },
  {
    avatar: 'svg:avatar-4',
    content: $t('views.dashboard.workspace.trends.item-3-content'),
    date: $t('views.dashboard.workspace.trends.item-3-date'),
    title: $t('views.dashboard.workspace.trends.item-3-title'),
  },
  {
    avatar: 'svg:avatar-1',
    content: $t('views.dashboard.workspace.trends.item-4-content'),
    date: $t('views.dashboard.workspace.trends.item-4-date'),
    title: $t('views.dashboard.workspace.trends.item-4-title'),
  },
  {
    avatar: 'svg:avatar-2',
    content: $t('views.dashboard.workspace.trends.item-5-content'),
    date: $t('views.dashboard.workspace.trends.item-5-date'),
    title: $t('views.dashboard.workspace.trends.item-5-title'),
  },
  {
    avatar: 'svg:avatar-3',
    content: $t('views.dashboard.workspace.trends.item-6-content'),
    date: $t('views.dashboard.workspace.trends.item-6-date'),
    title: $t('views.dashboard.workspace.trends.item-6-title'),
  },
  {
    avatar: 'svg:avatar-4',
    content: $t('views.dashboard.workspace.trends.item-7-content'),
    date: $t('views.dashboard.workspace.trends.item-7-date'),
    title: $t('views.dashboard.workspace.trends.item-7-title'),
  },
  {
    avatar: 'svg:avatar-4',
    content: $t('views.dashboard.workspace.trends.item-8-content'),
    date: $t('views.dashboard.workspace.trends.item-8-date'),
    title: $t('views.dashboard.workspace.trends.item-8-title'),
  },
];

const router = useRouter();

// 这是一个示例方法，实际项目中需要根据实际情况进行调整
// This is a sample method, adjust according to the actual project requirements
function navTo(nav: WorkbenchProjectItem | WorkbenchQuickNavItem) {
  if (nav.url?.startsWith('http')) {
    openWindow(nav.url);
    return;
  }
  if (nav.url?.startsWith('/')) {
    router.push(nav.url).catch((error) => {
      console.error('Navigation failed:', error);
    });
  } else {
    console.warn(`Unknown URL for navigation item: ${nav.title} -> ${nav.url}`);
  }
}
</script>

<template>
  <div class="p-5">
    <WorkbenchHeader
      :avatar="userStore.userInfo?.avatar || preferences.app.defaultAvatar"
    >
      <template #title>
        {{ $t('views.dashboard.workspace.header.title', [userStore.userInfo?.nickname]) }}
      </template>
      <template #description>
        {{ $t('views.dashboard.workspace.header.description') }}
      </template>
      <template #extra>
        <div class="flex flex-col justify-center text-right">
          <span class="text-foreground/80">
            {{ $t('views.dashboard.workspace.header.extra-0') }}
          </span>
          <span class="text-2xl">2/10</span>
        </div>

        <div class="mx-12 flex flex-col justify-center text-right md:mx-16">
          <span class="text-foreground/80">
            {{ $t('views.dashboard.workspace.header.extra-1') }}
          </span>
          <span class="text-2xl">8</span>
        </div>
        <div class="mr-4 flex flex-col justify-center text-right md:mr-10">
          <span class="text-foreground/80">
            {{ $t('views.dashboard.workspace.header.extra-2') }}
          </span>
          <span class="text-2xl">300</span>
        </div>
      </template>
    </WorkbenchHeader>

    <div class="mt-5 flex flex-col lg:flex-row">
      <div class="mr-4 w-full lg:w-3/5">
        <WorkbenchProject :items="projectItems" :title="$t('views.dashboard.workspace.project.title')" @click="navTo" />
        <WorkbenchTrends :items="trendItems" class="mt-5" :title="$t('views.dashboard.workspace.trends.title')" />
      </div>
      <div class="w-full lg:w-2/5">
        <WorkbenchQuickNav
          :items="quickNavItems"
          class="mt-5 lg:mt-0"
          :title="$t('views.dashboard.workspace.quickNav.title')"
          @click="navTo"
        />
        <WorkbenchTodo :items="todoItems" class="mt-5" :title="$t('views.dashboard.workspace.todo.title')" />
        <AnalysisChartCard class="mt-5" :title="$t('views.dashboard.workspace.visitsSource')">
          <AnalyticsVisitsSource />
        </AnalysisChartCard>
      </div>
    </div>
  </div>
</template>
